@extends('wx.layout.default')

@section('wx.pbody')

  <div class="weui-form">
    @include('wx.layout.header')

    <div class="weui-panel__bd">
        @foreach ($books as $book)
        <div class="weui-media-box weui-media-box_text">
            <div class="book-image">
              <img class="lazy img-error1" src="/assets/images/books/{{$book->dbid}}.jpg" data-original="/assets/images/books/{{$book->dbid}}.jpg" />
            </div>
            <h4 class="weui-media-box__title"><span class="smaller-80">{!! $book->present()->bookStore !!}</span> {{ $book->title }}</h4>            
            <p class="weui-media-box__desc">{{ $book->summary }}</p>
            <ul class="weui-media-box__info">
                <li class="weui-media-box__info__meta">{{ $book->author }}</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{ $book->publisher }}</li>
            </ul>
            <ul class="weui-media-box__info" style="margin-top:0;">
                <li class="weui-media-box__info__meta">ISBN: {{ $book->isbn }}</li>
                <li class="weui-media-box__info__meta">借阅 <span class="green b">{{ $book->borrows_count }}</span> 次</li>
                <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{!! $book->present()->bookStatusPresenter !!}</li>
            </ul>
        </div>
        @endforeach
    </div>
  </div>

@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
  <script type="text/javascript">
      $(function () {

        $(".lazy").lazyload({
          effect : "fadeIn"
        });

      });
  </script>
@stop